<template>
  <el-card 
    :body-style="{ padding: '0px' }" 
    shadow="hover"
    class="course-card"
    @click="goToCourse"
  >
    <div class="course-image">
      <img 
        :src="course.picPaths || '/placeholder-course.jpg'" 
        :alt="course.title"
        @error="handleImageError"
      />
    </div>
    
    <div class="course-info">
      <h3 class="course-title">{{ course.title }}</h3>
      <p class="course-description">{{ course.body }}</p>
      
      <div class="course-meta">
        <div class="time-info">
          <el-icon><Clock /></el-icon>
          <span>{{ formatTime(course.startTime) }} - {{ formatTime(course.endTime) }}</span>
        </div>
        
        <div class="author-info">
          <el-icon><User /></el-icon>
          <span>讲师ID: {{ course.userid }}</span>
        </div>
      </div>
      
      <div class="course-actions">
        <el-button type="primary" size="small" @click.stop="goToCourse">
          查看详情
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { Clock, User } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  course: {
    type: Object,
    required: true
  }
})

const router = useRouter()

const goToCourse = () => {
  router.push(`/course/${props.course.id}`)
}

const handleImageError = (e) => {
  e.target.src = ''
}

const formatTime = (timestamp) => {
  if (!timestamp) return '-'
  const date = new Date(parseInt(timestamp))
  return date.toLocaleDateString('zh-CN')
}
</script>

<style scoped>
.course-card {
  cursor: pointer;
  transition: transform 0.2s;
  height: 100%;
}

.course-card:hover {
  transform: translateY(-2px);
}

.course-image {
  height: 200px;
  overflow: hidden;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-info {
  padding: 16px;
}

.course-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-description {
  color: #606266;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 12px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-meta {
  margin-bottom: 12px;
}

.time-info, .author-info {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.time-info .el-icon, .author-info .el-icon {
  margin-right: 4px;
}

.course-actions {
  text-align: right;
}
</style>